<template>
  <Card>
    <Form :model="detail" :label-width="150" ref="detail" :rules="ruleValidate">
      <h3 class="form-tip">
        产品详情
      </h3>
      <Row>
        <FormItem label="产品名称：" prop="title">
          <Input style="width: 250px;" placeholder="请输入产品名称" v-model="detail.title"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="是否热门产品：" prop="isHotProducts">
          <RadioGroup v-model="detail.isHotProducts">
            <Radio :label="1">普通产品</Radio>
            <Radio :label="2">热门产品</Radio>
          </RadioGroup>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="图标：" >
          <img v-if="detail.picture" style="height:50px;width:50px" :src="detail.picture" />
          <qiniu-upload v-bind:imgUrl.sync='detail.picture'  :rate1="0.5" :rate2="2" :buttonText="add?'上传图标':'更改图标'"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="标签：" prop="label">
          <Input style="width: 100px;margin-right: 10px;" placeholder="请输入标签" v-for=" (item,index) in labelList" :key="index" v-model="labelList[index]"/>
          <Icon type="md-add-circle" size="20" @click="addLabel" />
          <Icon v-if="labelList.length >= 2" type="md-backspace" size="20" @click="reduceLabel" />
        </FormItem>
      </Row>
      <Row>
        <FormItem label="适用人群：" prop="scope">
          <Input style="width: 250px;" placeholder="请输入适用人群" v-model="detail.scope"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="额度范围：" prop="amount">
          <Input style="width: 250px;" placeholder="请输入额度范围" v-model="detail.amount"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="准入条件：" >
          <Input style="flex: 1;margin-bottom: 10px;" placeholder="请输入准入条件" v-for=" (item, index) in contentList" :key="index" v-model="contentList[index]" />
          <Icon type="md-add-circle" size="20" @click="addContent" />
          <Icon v-if="contentList.length >= 2" type="md-backspace" size="20" @click="reduceContent" />
        </FormItem>
      </Row>
      <FormItem>
        <Button type="primary" :loading="loading" @click="save('detail')">保存</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
  import { getGoodsDetail, editGoods } from '@/api/good'
  import qiniuUpload from "_c/upload/qiniuUpload.vue"

  export default {
    components: {
      qiniuUpload
    },
    name: 'newspaper-detail',
    data () {
      return {
        loading:false,
        add: false,
        detail: {
          subheading: '',
          picture: '',
          label: [],
          scope: '',
          amount: '',
          content: []
        },
        labelList: [''],
        contentList: [''],
        ruleValidate: {
          title: [
            {required: true, message: '产品名称不能为空', trigger: 'blur'}
          ],
          isHotProducts: [
            {required: true, type:'number', message: '请选择是否热门馋哦', trigger: 'change'}
          ],
          scope: [
            {required: true, message: '适用人群不能为空', trigger: 'blur'}
          ],
          amount: [
            {required: true, message: '额度范围不能为空', trigger: 'blur'}
          ],
        },
      }
    },
    methods: {
      addLabel () {
        this.labelList.push('')
      },
      reduceLabel () {
        this.labelList.splice(-1,1)
      },
      addContent () {
        this.contentList.push('')
      },
      reduceContent () {
        this.contentList.splice(-1,1)
      },
      getDetail () {
        getGoodsDetail(this.$route.query.id).then(data => {
          this.detail = data
          this.labelList = data.label
          this.contentList = data.content
        })
      },
      save (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            const params = Object.assign({},this.detail,{label:this.labelList,content:this.contentList})
            editGoods(params).then(()=> {
              this.$Message.success(this.add?'新增成功':'修改成功')
              this.$router.go(-1)
            })
          } else {
            this.$Message.error(this.add?'新增失败':'修改失败');
          }
        });
      },

    },
    mounted () {
      if(this.$route.query.id) {
        this.getDetail()
      } else {
        this.add = true
      }
    }
  }
</script>

<style scoped>

</style>
